<template>
  <div>
    <list-title title="新碟上架"></list-title>
    <div class="all-album-wrap">
      <div
        v-for="item of albums"
        @click="toAlbumMsg(item.id)"
        :key="item.id"
        class="each-album"
      >
        <img v-lazy="item.picUrl" />
        <p class="each-album-name">
          {{ item.name }}
        </p>
        <artists :artists="item.artists" class="each-album-artists"></artists>
      </div>
    </div>
    <mugen-scroll
      :handler="() => fetchData().then()"
      :should-handle="!loading"
      :handleOnMount="false"
    >
      loading...
    </mugen-scroll>
  </div>
</template>

<script lang="ts">
import listTitle from "../../components/listTitle.vue";
import artists from "../../components/artists.vue";
import MugenScroll from "vue-mugen-scroll";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { CommonIdType } from "@/model/id-or-enum.model";
import { Album } from "@/model/music-info.model";
import { APIType } from "@/api/index";
import * as _ from "lodash";
@Component({
  components: {
    listTitle,
    artists,
    MugenScroll,
  },
})
export default class AlbumListComponent extends Vue {
  public loading = false;
  public albums: Album[] = [];

  $router: Router;
  $api: APIType;

  public toAlbumMsg(id: CommonIdType) {
    this.$router.push({ path: `/album/${id}` }).catch((err) => err);
  }
  public async fetchData() {
    const offset = this.albums.length;
    this.loading = true;
    const result = await this.$api.getTopAlbumList(offset);
    const albums: Album[] = _.concat(
      this.albums,
      result.monthData ?? result.weekData
    );
    _.uniqBy(albums, (x) => x.id);
    this.albums = albums;
    this.loading = false;
  }
}
</script>

<style lang="scss" scoped>
@mixin shenglue {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.all-album-wrap {
  .each-album {
    width: 50%;
    display: inline-block;
    text-align: center;
    img {
      width: 80%;
    }
    .each-album-name {
      font-size: 0.2rem;
      @include shenglue;
    }
    .each-album-artists {
      @include shenglue;
    }
  }
}
</style>
